<template>
  <div class="app-container flex flex-col gap-4">
    <!-- 顶部统计卡片（带渐变容器） -->
    <div class="rounded-xl p-5 bg-gradient-to-b from-[#ecf4ff] to-[#dae5ff]">
      <div class="grid grid-cols-5 gap-5">
        <div class="flex items-center gap-5 p-5 bg-white rounded-xl" v-for="item in topStats" :key="item.key">
          <img :src="item.icon" alt="icon" class="w-[42px] h-[42px]" />
          <div>
            <div class="text-[28px] text-[#1f2a55] font-600 leading-none mb-1.5">{{ item.value }}</div>
            <div class="text-[#5f6b8a]">{{ item.label }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主体内容 -->
    <div>
      <el-row :gutter="16">
        <el-col :span="7">
          <!-- 30% 企业基本信息 -->
          <div class="rounded-xl bg-white p-3 pb-4 border border-[#ebeef5] h-[350px] overflow-hidden flex flex-col">
            <div class="card-title relative pl-[18px] font-600 text-[#1f2a55] my-2"><span>企业基本信息</span></div>
            <div class="flex-1 overflow-y-auto overflow-x-hidden">
              <v-chart class="w-full h-[280px]" :option="barOption" autoresize />
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <!-- 45% 设备信息 -->
          <div class="rounded-xl bg-white p-3 pb-4 border border-[#ebeef5] h-[350px] overflow-hidden flex flex-col">
            <div class="card-title relative pl-[18px] font-600 text-[#1f2a55] my-2"><span>设备信息</span></div>
            <div class="flex-1 overflow-y-auto overflow-x-hidden pr-1">
              <div class="grid grid-cols-3 gap-2 mb-2">
                <div
                  class="relative p-3 border border-[#ebf0fb] rounded-[10px]"
                  v-for="(item, idx) in deviceInfo"
                  :key="item.key"
                  :style="getDeviceCardStyle(idx)"
                >
                  <div class="text-[#5f6b8a] mb-1">{{ item.label }}</div>
                  <div class="text-[24px] text-[#1f2a55] font-600">{{ item.value }}</div>
                  <img :src="item.icon" alt="device" class="absolute right-3 bottom-3 w-[32px] h-[32px] opacity-90" />
                </div>
              </div>
              <div class="border border-[#f0f2f7] rounded-[10px] overflow-hidden divide-y divide-[#f0f2f7] text-[14px]">
                <div class="grid grid-cols-[2fr_2fr_1fr_1fr] gap-2 p-3 bg-[#f8fafc] text-[#5f6b8a] font-600">
                  <div>设备名称</div>
                  <div>任务时间</div>
                  <div>负责人</div>
                  <div>是否超期</div>
                </div>
                <div v-for="(row, idx) in deviceRows" :key="idx" class="grid grid-cols-[2fr_2fr_1fr_1fr] gap-2 p-3">
                  <div>{{ row.name }}</div>
                  <div>{{ row.time }}</div>
                  <div>{{ row.owner }}</div>
                  <div>{{ row.expired ? '是' : '否' }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <!-- 25% 双重预防机制 -->
          <div class="rounded-xl bg-white p-3 pb-4 border border-[#ebeef5] h-[350px] overflow-hidden flex flex-col">
            <div class="card-title relative pl-[18px] font-600 text-[#1f2a55] my-2"><span>双重预防机制</span></div>
            <div class="flex-1 overflow-y-auto overflow-x-hidden">
              <div class="grid grid-cols-3 gap-3">
                <div v-for="item in riskItems" :key="item.key" class="text-left px-3 py-4">
                  <div class="text-[22px] font-600 text-[#1f2a55]">{{ item.value }}</div>
                  <div class="text-[#5f6b8a] mt-1.5 text-[13px]">{{ item.label }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="16" class="mt-4">
        <el-col :span="17">
          <!-- 75% 特殊作业 -->
          <div class="rounded-xl bg-white p-3 pb-4 border border-[#ebeef5] h-[390px] overflow-hidden flex flex-col">
            <div class="card-title relative pl-[18px] font-600 text-[#1f2a55] my-2"><span>特殊作业</span></div>
            <div class="flex-1 overflow-y-auto overflow-x-hidden">
              <div class="grid grid-cols-3 gap-3">
                <div class="p-2.5" v-for="(group, gi) in specialGroups" :key="gi">
                  <!-- 页签条（浅蓝，略窄） -->
                  <div class="mx-auto w-[92%] bg-[#ecf4ff] rounded-t-md px-3 py-2 flex items-center justify-between text-[#1f2a55]">
                    <div class="head-title">{{ group.title }}</div>
                    <div class="head-total">总数：{{ group.total }}</div>
                  </div>
                  <!-- 列表卡片（灰底圆角） -->
                  <div class="bg-[#f7f7f7] rounded-xl p-2.5 h-[300px] overflow-y-auto overflow-x-hidden text-[14px]">
                    <div class="flex items-center justify-between p-2.5" v-for="(row, ri) in group.rows" :key="ri">
                      <div>{{ row.name }}</div>
                      <div>{{ row.level }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <!-- 25% 人员定位 -->
          <div class="rounded-xl bg-white p-3 pb-4 border border-[#ebeef5] h-[390px] overflow-hidden flex flex-col">
            <div class="card-title relative pl-[18px] font-600 text-[#1f2a55] my-2"><span>人员定位</span></div>
            <div class="flex-1 overflow-y-auto overflow-x-hidden">
              <v-chart class="w-full h-[320px]" :option="lineOption" autoresize />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup name="Dashboard" lang="ts">
import { ref } from 'vue';
// 顶部统计卡片图标
import iconZhuangzhi from '@/assets/images/zhuangzhi.png';
import iconChuguan from '@/assets/images/chuguan.png';
import iconKufang from '@/assets/images/kufang.png';
import iconGuandao from '@/assets/images/guandao.png';
import iconQita from '@/assets/images/qita.png';
// 设备信息图标
import iconXunjian from '@/assets/images/xunjian-likexunjian.png';
import iconJifei from '@/assets/images/jifei.png';
import iconWarning from '@/assets/images/tanhao.png';

const topStats = [
  { key: 'zhuangzhi', label: '生产装置数量', value: 26, icon: iconZhuangzhi },
  { key: 'chuguan', label: '储罐数量', value: 26, icon: iconChuguan },
  { key: 'kufang', label: '库房数量', value: 26, icon: iconKufang },
  { key: 'guandao', label: '管道数量', value: 26, icon: iconGuandao },
  { key: 'qita', label: '其他', value: 26, icon: iconQita }
];

const deviceInfo = [
  { key: 'task', label: '当日巡检任务', value: 34, icon: iconXunjian },
  { key: 'record', label: '当日巡检记录', value: 34, icon: iconJifei },
  { key: 'miss', label: '漏检任务', value: 34, icon: iconWarning }
];

const deviceRows = ref([
  { name: '设备名称', time: '2025-01-02 12:13:13', owner: '张三', expired: false },
  { name: '设备名称', time: '2025-01-02 12:13:13', owner: '张三', expired: false },
  { name: '设备名称', time: '2025-01-02 12:13:13', owner: '张三', expired: false },
  { name: '设备名称', time: '2025-01-02 12:13:13', owner: '张三', expired: false }
]);

const riskItems = [
  { key: 'fxdx', label: '风险分析对象', value: 34 },
  { key: 'fxdy', label: '风险分析单元', value: 34 },
  { key: 'yhfxrw', label: '隐患排查任务', value: 34 },
  { key: 'yhjll', label: '隐患排查记录', value: 34 },
  { key: 'yhzh', label: '隐患治理', value: 34 },
  { key: 'fxfmg', label: '风险分析覆盖率', value: 34 },
  { key: 'zkzl', label: '管控措施落实率', value: 34 },
  { key: 'yhpcl', label: '隐患排查完成率', value: 34 },
  { key: 'yhzdbz', label: '隐患整改达标率', value: 34 }
];

// 设备信息卡片渐变背景
const getDeviceCardStyle = (idx: number) => {
  const gradients: [string, string][] = [
    ['#d9ecff', '#f8fafe'],
    ['#d9e0ff', '#f8fbfe'],
    ['#ffe9d9', '#f8fafe']
  ];
  const [from, to] = gradients[idx] || gradients[0];
  return { background: `linear-gradient(180deg, ${from} 0%, ${to} 100%)` } as const;
};

// 特殊作业三列示例数据
const specialGroups = ref([
  {
    title: '特殊作业报警',
    total: 32,
    rows: [
      { name: '作业名称', level: '等级' },
      { name: '作业名称', level: '等级' },
      { name: '作业名称', level: '等级' },
      { name: '作业名称', level: '等级' }
    ]
  },
  {
    title: '特殊作业活动',
    total: 32,
    rows: [
      { name: '作业名称', level: '等级' },
      { name: '作业名称', level: '等级' },
      { name: '作业名称', level: '等级' },
      { name: '作业名称', level: '等级' }
    ]
  },
  {
    title: '特殊作业报警',
    total: 32,
    rows: [
      { name: '作业名称', level: '报警原因或警示原因' },
      { name: '作业名称', level: '报警原因或警示原因' },
      { name: '作业名称', level: '报警原因或警示原因' },
      { name: '作业名称', level: '报警原因或警示原因' }
    ]
  }
]);

// 柱状图配置（企业基本信息）
const barOption = ref({
  grid: { left: 30, right: 20, top: 30, bottom: 30 },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['人员总数', '安全管理人员', '化工专业', '重大危险源'],
    axisTick: { show: false },
    axisLine: { lineStyle: { color: '#DDE3F0' } },
    axisLabel: { color: '#5F6B8A' }
  },
  yAxis: {
    type: 'value',
    axisLine: { show: false },
    splitLine: { lineStyle: { color: '#EEF2FA' } },
    axisLabel: { color: '#5F6B8A' }
  },
  series: [
    {
      type: 'bar',
      data: [30, 20, 25, 40],
      barWidth: 28,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#4C7CF8' },
            { offset: 1, color: '#A9C2FF' }
          ]
        },
        borderRadius: [6, 6, 0, 0]
      }
    }
  ]
});

// 折线图配置（人员定位）
const lineOption = ref({
  grid: { left: 30, right: 20, top: 30, bottom: 30 },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['1月', '3月', '5月', '7月', '9月', '11月'],
    axisTick: { show: false },
    axisLine: { lineStyle: { color: '#DDE3F0' } },
    axisLabel: { color: '#5F6B8A' }
  },
  yAxis: {
    type: 'value',
    axisLine: { show: false },
    splitLine: { lineStyle: { color: '#EEF2FA' } },
    axisLabel: { color: '#5F6B8A' }
  },
  series: [
    {
      name: '在线',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      data: [30, 60, 70, 55, 40, 65],
      lineStyle: { color: '#4C7CF8' },
      itemStyle: { color: '#4C7CF8' },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(76, 124, 248, 0.35)' },
            { offset: 1, color: 'rgba(76, 124, 248, 0.00)' }
          ]
        }
      }
    },
    {
      name: '离线',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      data: [50, 35, 55, 45, 60, 30],
      lineStyle: { color: '#B077F2' },
      itemStyle: { color: '#B077F2' },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(176, 119, 242, 0.35)' },
            { offset: 1, color: 'rgba(176, 119, 242, 0.00)' }
          ]
        }
      }
    }
  ]
});
</script>

<style lang="scss" scoped>
.card-title {
  position: relative;
  padding-left: 18px;
}
.card-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 13px;
  background: url('@/assets/images/card-title-prefix.png') no-repeat center / contain;
}
</style>
